<template>
  <div style="margin-left: 20px; margin-top: 6px">
    <n-flex>
      <div class="light-green" @click="handleClick('download')">
        <n-flex>
          <NIcon size="30px"><DownloadIcon /></NIcon>
          <n-gradient-text type="info">下载文件</n-gradient-text>
        </n-flex>
      </div>
      <!-- 其他 div 省略 -->
      <div class="green" />
      <div class="light-green" />
      <div class="green" />
      <div class="light-green" />
      <div class="green" />
      <div class="light-green" />
      <div class="green" />
    </n-flex>
  </div>
</template>

<script setup lang="ts">
import { CloudDownloadOutline as DownloadIcon } from '@vicons/ionicons5'
import { NIcon, NGradientText } from 'naive-ui'
import { useRouter } from 'vue-router'
import { inject, Ref } from 'vue'
import type { MenuInst } from 'naive-ui'

const router = useRouter()
const activeKey = inject<Ref<string | null>>('activeKey')
const menuInstRef = inject<Ref<MenuInst | null>>('menuInstRef')

const handleClick = (url: string) => {
  menuInstRef?.value?.showOption(url)
  router.push(url)
  // 更新 activeKey
  if (activeKey) {
    activeKey.value = url.split('/').pop() ?? null // 如果 pop 返回 undefined，则使用 null
  }
}
</script>
<style scoped>
.light-green {
  width: 20vw; /* 使用视窗宽度的百分比 */
  height: calc(20vw * 0.618); /* 动态计算高度 */
  padding: 15px;
  border-radius: 10px;
  background-color: rgba(0, 128, 0, 0.12);
}
.green {
  width: 20vw; /* 使用视窗宽度的百分比 */
  height: calc(20vw * 0.618); /* 动态计算高度 */
  padding: 15px;
  border-radius: 10px;
  background-color: rgba(0, 128, 0, 0.24);
}
.n-gradient-text {
  font-size: 20px;
}
</style>
